<template>
    <div class="disease-management">
        <el-row :gutter="20">
            <!-- 左侧树形结构 -->
            <el-col :span="8">
                <el-card class="tree-card">
                    <template #header>
                        <div class="card-header">
                            <span>医疗机构层级</span>
                            <el-button type="primary" @click="handleAddHospital">添加医院</el-button>
                        </div>
                    </template>
                    <el-tree
                        ref="treeRef"
                        :data="treeData"
                        :props="defaultProps"
                        node-key="id"
                        :expand-on-click-node="false"
                        @node-click="handleNodeClick"
                    >
                        <template #default="{ node, data }">
                            <span class="custom-tree-node">
                                <span>{{ node.label }}</span>
                                <span class="node-actions">
                                    <el-button
                                        type="primary"
                                        link
                                        @click.stop="handleAdd(data)"
                                        :disabled="!canAdd(data)"
                                    >添加</el-button>
                                    <el-button
                                        type="primary"
                                        link
                                        @click.stop="handleEdit(data)"
                                    >编辑</el-button>
                                    <el-button
                                        type="danger"
                                        link
                                        @click.stop="handleDelete(node, data)"
                                    >删除</el-button>
                                </span>
                            </span>
                        </template>
                    </el-tree>
                </el-card>
            </el-col>

            <!-- 右侧详情 -->
            <el-col :span="16">
                <el-card v-if="currentNode" class="detail-card">
                    <template #header>
                        <div class="card-header">
                            <span>{{ getNodeTypeName(currentNode.type) }}详情</span>
                        </div>
                    </template>
                    <el-form :model="currentNode" label-width="120px">
                        <el-form-item :label="getNodeTypeName(currentNode.type) + '名称'">
                            <el-input v-model="currentNode.name" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="创建时间">
                            <el-input v-model="currentNode.createTime" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="描述">
                            <el-input v-model="currentNode.description" type="textarea" disabled></el-input>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>

        <!-- 添加/编辑对话框 -->
        <el-dialog
            v-model="dialogVisible"
            :title="dialogType === 'add' ? '添加' + getNodeTypeName(addType) : '编辑' + getNodeTypeName(currentNode?.type)"
            width="30%"
        >
            <el-form :model="formData" label-width="120px" ref="formRef">
                <el-form-item :label="getNodeTypeName(dialogType === 'add' ? addType : currentNode?.type) + '名称'" prop="name">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input v-model="formData.description" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleSubmit">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

// 节点类型枚举
const NodeType = {
    HOSPITAL: 'hospital',
    DEPARTMENT: 'department',
    DISEASE: 'disease',
    DISEASE_LEVEL1: 'disease_level1',
    DISEASE_LEVEL2: 'disease_level2',
    DISEASE_LEVEL3: 'disease_level3'
};

// 树形数据
const treeData = ref([]);

// 树形配置
const defaultProps = {
    children: 'children',
    label: 'name'
};

// 当前选中节点
const currentNode = ref(null);

// 对话框相关
const dialogVisible = ref(false);
const dialogType = ref('add'); // 'add' 或 'edit'
const addType = ref('');
const formData = reactive({
    name: '',
    description: ''
});

// 获取节点类型名称
const getNodeTypeName = (type) => {
    const typeNames = {
        [NodeType.HOSPITAL]: '医院',
        [NodeType.DEPARTMENT]: '科室',
        [NodeType.DISEASE]: '疾病',
        [NodeType.DISEASE_LEVEL1]: '疾病分类',
        [NodeType.DISEASE_LEVEL2]: '疾病子分类',
        [NodeType.DISEASE_LEVEL3]: '疾病详细分类'
    };
    return typeNames[type] || '';
};

// 判断是否可以添加子节点
const canAdd = (data) => {
    if (data.type === NodeType.HOSPITAL) return true;
    if (data.type === NodeType.DEPARTMENT) return true;
    if (data.type === NodeType.DISEASE) return true;
    if (data.type === NodeType.DISEASE_LEVEL1) return true;
    if (data.type === NodeType.DISEASE_LEVEL2) return true;
    return false;
};

// 获取子节点类型
const getChildType = (parentType) => {
    const typeMap = {
        [NodeType.HOSPITAL]: NodeType.DEPARTMENT,
        [NodeType.DEPARTMENT]: NodeType.DISEASE,
        [NodeType.DISEASE]: NodeType.DISEASE_LEVEL1,
        [NodeType.DISEASE_LEVEL1]: NodeType.DISEASE_LEVEL2,
        [NodeType.DISEASE_LEVEL2]: NodeType.DISEASE_LEVEL3
    };
    return typeMap[parentType];
};

// 处理节点点击
const handleNodeClick = (data) => {
    currentNode.value = data;
};

// 处理添加医院
const handleAddHospital = () => {
    dialogType.value = 'add';
    addType.value = NodeType.HOSPITAL;
    formData.name = '';
    formData.description = '';
    dialogVisible.value = true;
};

// 处理添加子节点
const handleAdd = (data) => {
    dialogType.value = 'add';
    addType.value = getChildType(data.type);
    formData.name = '';
    formData.description = '';
    currentNode.value = data;
    dialogVisible.value = true;
};

// 处理编辑节点
const handleEdit = (data) => {
    dialogType.value = 'edit';
    formData.name = data.name;
    formData.description = data.description;
    currentNode.value = data;
    dialogVisible.value = true;
};

// 处理删除节点
const handleDelete = (node, data) => {
    ElMessageBox.confirm(
        `确认删除${getNodeTypeName(data.type)}"${data.name}"吗？`,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
        ElMessage.success('删除成功');
    }).catch(() => {});
};

// 处理表单提交
const handleSubmit = () => {
    if (!formData.name.trim()) {
        ElMessage.warning('请输入名称');
        return;
    }

    const newNode = {
        id: Date.now(),
        name: formData.name,
        description: formData.description,
        createTime: new Date().toLocaleString(),
        children: []
    };

    if (dialogType.value === 'add') {
        newNode.type = addType.value;
        if (addType.value === NodeType.HOSPITAL) {
            treeData.value.push(newNode);
        } else {
            currentNode.value.children = currentNode.value.children || [];
            currentNode.value.children.push(newNode);
        }
        ElMessage.success('添加成功');
    } else {
        currentNode.value.name = formData.name;
        currentNode.value.description = formData.description;
        ElMessage.success('修改成功');
    }

    dialogVisible.value = false;
};
</script>

<style lang="scss" scoped>
.disease-management {
    padding: 20px;

    .tree-card,
    .detail-card {
        margin-bottom: 20px;
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }

    .node-actions {
        margin-left: 20px;
    }
}
</style>